<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>

    <title>日志控制台</title>
</head>
<body class="skin-default">

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
            <div class="button-bar card" id="btns" style="padding: 15px;">
                <button type="button" class="btn btn-primary" onclick="openReadLog()">
                    <i class="fa fa-play-circle" aria-hidden="true"></i>&nbsp;启动实时日志
                </button>
                <button type="button" class="btn btn-danger" onclick="closeReadLog()">
                    <i class="fa fa-stop-circle-o" aria-hidden="true"></i>&nbsp;关闭实时日志
                </button>
                <button type="button" class="btn btn-warning" onclick="clearLog()">
                    <i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;清空日志
                </button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card" id="tools" style="padding: 15px 15px 5px 15px;">
                <form id="pageForm" name="pageForm" action="" method="post">
                    <div class="young-form-item col-sm-3">
                        <div class="young-form-label">关键字：</div>
                        <div class="young-form-input-block">
                            <input type="text" id="keyword" oninput="keywordInput()" class="form-control " placeholder="输入关键字进行过滤" />
                        </div>
                    </div>
                    <div class="young-form-item col-sm-2">
                        <div class="young-form-label">当前状态：</div>
                        <div class="young-form-input-block">
                            <span id="tips">准备就绪!</span>
                        </div>
                    </div>
                    <div class="young-form-item col-sm-2">
                        <div class="young-form-label">日志数：</div>
                        <div class="young-form-input-block">
                            <span id="match">0</span>
                            /
                            <span id="total">0</span>
                        </div>
                    </div>
                    <div class="young-form-item col-sm-3">
                        <div class="young-form-label">编码：</div>
                        <div class="young-form-input-block">
                            <span>
                                <label><input type="radio" name="charset" value="UTF-8" class=""> UTF-8</label>
                                <label><input type="radio" name="charset" value="GBK" class=""> GBK</label>
                                <label><input type="radio" name="charset" value="ISO-8859-1" class="" checked> ISO-8859-1</label>
                            </span>
                        </div>
                    </div>
                    <div class="young-form-item col-sm-2">
                        <div class="young-form-label">滚动条：</div>
                        <div class="young-form-input-block">
                            <span>
                                <label><input type="checkbox" id="scollBottom" value="" class="" checked="true"> 置底</label>
                            </span>
                        </div>
                    </div>
                    <div style="clear:both;"></div>
                </form>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
            <div class="padding-15 card">
                <div id="logConsole" style="word-break: break-all;line-height: 1.7;overflow: auto;border: #cccccc solid 1px;">

                </div>
            </div>
        </div>
    </div>
</div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<style>
    html,body{
        height: 100%;
    }
    .log-item{
        padding: 0px 5px 2px 5px;
    }
    .log-item:hover{
        background-color: #F3F7F9;
    }
</style>
<script type="text/javascript">
    //高度适配
    function heightAdapt(){
        var h = $('body').height() - $("#btns").outerHeight() - $("#tools").outerHeight() - 90;
        if(h > 200){//避免高度过于小
            $("#logConsole").css('height', h+'px').css('overflow', 'auto');
        }else{//默认高度为auto
            $("#logConsole").css('height', 'auto').css('overflow', 'auto');
        }
    }
    window.onresize = function(){
        heightAdapt();
    };
    heightAdapt();


    var logArr = [];//日志数组
    var readFlag = true;//开关
    //实时日志
    function realTimeReadLog(poniter){
        if(typeof (poniter) != 'number'){
            poniter = '';
        }

        if(readFlag){
            jo.postAjax(contextPath + 'log/client/realTime', {lastPointer : poniter, charset:jo.getCheckBoxValue('charset')}, function(json){
                if(json && json.code == 0 && json.data && json.data[0]){
                    var log = json.data[0];//日志
                    if(log && log.logList && log.logList.length > 0){
                        for(var i=0;i<log.logList.length;i++){
                            var item = log.logList[i];
                            var text = item.content;//日志文本
                            text = text.replace(/</ig, '&lt;');//转义html关键符号
                            text = text.replace(/>/ig, '&gt;');//转义html关键符号
                            var len = logArr.push(text);//记录下来
                            $('#total').html(len);//总数
                            var logShow = formatLog(text);//展示的日志
                            if(logShow){
                                $('#match').html(parseInt($('#match').html())+1);//匹配数加1
                            }
                            $("#logConsole").append('<p class="log-item" index="'+(len-1)+'" start="'+item.startPointer+'" end="'+item.endPointer+'">'+logShow+'</p>');

                            //滚动条置底
                            var cons = document.getElementById('logConsole');
                            if(document.getElementById('scollBottom').checked){
                                cons.scrollTop = cons.scrollHeight;
                            }
                        }
                    }
                    //2秒间隔
                    window.setTimeout(function(){
                        realTimeReadLog(log.lastPointer);
                    }, 1500);
                }else{
                    closeReadLog();//遇到错误关闭
                }
            }, true);
        }else{
            console.info('日志已关闭');
        }
    }
    //启动日志
    function openReadLog(){
        readFlag = true;
        $("#tips").html('<span class="font-green">实时日志已开启</span>');
        realTimeReadLog();
    }
    //关闭日志
    function closeReadLog(){
        readFlag = false;
        $("#tips").html('<span class="font-red">实时日志已关闭</span>');
    }

    //关键字过滤
    function keywordInput(){
        var key = $('#keyword').val();//关键字
        var i = 0;
        $('.log-item').each(function(idx, ele){
            var log = logArr[parseInt($(this).attr('index'))];//日志原始内容
            if(key && log && log.indexOf(key) > -1){//存在关键字
                log = log.replace(new RegExp(key, "ig"), '<span class="font-red" style="font-weight: 700;">'+key+'</span>');//转义html关键符号
                $(this).html(log);
                $(this).show();
                i++;
            }else if(!key){//关键字为空则全部显示
                $(this).html(log);
                $(this).show();
                i++;
            }else{
                $(this).hide();
            }
            //滚动条置底
            var cons = document.getElementById('logConsole');
            if(document.getElementById('scollBottom').checked){
                cons.scrollTop = cons.scrollHeight;
            }
        });
        $('#match').html(i);//匹配数
    }
    //格式化日志
    function formatLog(log){
        var key = $('#keyword').val();//关键字
        if(key && log && log.indexOf(key) > -1){
            return log.replace(new RegExp(key, "ig"), '<span class="font-red" style="font-weight: 700;">'+key+'</span>');//转义html关键符号
        }else if(!key){//关键字为空则全部显示
            return log;
        }else{
            return "";
        }
    }
    //清空
    function clearLog(){
        $('#total').html(0);//总数
        $('#match').html(0);//匹配数
        logArr = [];//清空日志数组
        $("#logConsole").html('');//清空控制台
    }
</script>

</body>
</html>
